import {Image, StyleSheet, View, Text, TouchableOpacity, Modal, ScrollView, Pressable} from 'react-native';
import {Stack, useLocalSearchParams, useRouter} from "expo-router";
import AntDesign from "@expo/vector-icons/AntDesign";
import avator from "@/assets/images/me/avator.png"
import activityIcon from '@/assets/images/space/activityIcon.png';
import equipmentIcon from "@/assets/images/space/equipmentIcon.png";
import joinIcon from "@/assets/images/space/joinIcon.png";
import productionIcon from "@/assets/images/space/productionIcon.png";
import videoIcon from "@/assets/images/space/videoIcon.png"
import NavBack from "@/components/navBack/index";
import locationIcon from "@/assets/images/space/locationIcon.png"
import {scaleSize} from "@/utils/screenSize";
import notice from "@/assets/images/space/noticeIcon.png";
import MarqueeView from 'react-native-marquee-view';
import closeIcon from "@/assets/images/space/closeIcon.png"
import dateTimeIcon from "@/assets/images/collection/dateTime.png";
import {useEffect, useState} from "react";
import {getSpaceDetailById, getSpaceJoinQrByIdRequest, getSpaceActivityListByRequest, getSpacePreductionByRequest} from "@/services/spaceServices";
import * as React from "react";
import {format} from "date-fns";
import RenderHTML from "react-native-render-html";
import {useNavigation} from "@react-navigation/native";

export default function spaceScreen() {

    const router = useRouter();
    const [isEquipment, setIsEquipment] = useState(false);
    const [isProgram, setIsProgram] = useState(false);
    const [isJoin, setIsJoin] = useState(false);
    const [isProduction, setIsProduction] = useState(false);
    const [spaceDetail, setSpaceDetail] = useState({});
    const [qrList, setQrList] = useState([]);
    const [facilityList, setFacilityList] = useState([]);
    const [activityList, setActivityList] = useState([]);
    const [htmlContent, setHtmlContent] = useState("");

    const routerParams = useLocalSearchParams();
    const navigation = useNavigation();

    const goVideoList = function () {
        router.push(`/space/videoList/${routerParams.spaceId}`)
    };

    const goFacilityList = function () {
        router.push(`/space/facilityList/${routerParams.spaceId}`)
    };

    const getSpaceProductionByHtml = function () {
        getSpacePreductionByRequest(routerParams.spaceId)
            .then(res => {
                setHtmlContent(res.data.intro);
                console.log('res', res);
            })
            .catch(err => {
                console.log('err', err)
            })
    };

    const getQrList = function (id) {
        getSpaceJoinQrByIdRequest(id)
            .then(res => {
                console.log('res', res.data);
                setQrList(res?.data?.qrCodeList);
            })
            .catch(err => {
                console.log('err', err);
            })
    };

    const getActivityList = function (id) {
        getSpaceActivityListByRequest(id)
            .then(res => {
                setActivityList(res.data?.activityList)
            })
    };


    useEffect(() => {

        getSpaceDetailById(routerParams?.spaceId)
            .then(res => {
                setSpaceDetail(res?.data)

                navigation.setOptions({
                    title: res.data.name
                });
                console.log('routerParams?.spaceId', routerParams?.spaceId);
                console.log('getSpaceDetailByIdgetSpaceDetailById', res?.data)
            })
            .catch(err => {
                console.log('err', err);
            })

        getQrList(routerParams?.spaceId);
        getActivityList(routerParams?.spaceId);
        getSpaceProductionByHtml();
    }, [])


    const computedTime = function (startT, endT) {
        const day1 = format(startT, "MMdd");
        const day2 = format(endT, "MMdd");
        if (day1 == day2) {
            return `${format(startT, "MM.dd")} ${format(startT, "mm:ss")}-${format(endT, "mm:ss")}`
        };
        return `${format(startT, "MM.dd")} ${format(startT, "mm:ss")}-${format(startT, "MM.dd")} ${format(endT, "mm:ss")}`
    };

    const goActivityDetail = function (id) {
        setIsProgram(false)
        router.push(`/activityDetail/${id}`)
    };

    //
    // const htmlContent = `
    //     <h1 style="color:blue;">这是标题</h1>
    //     <p>这是一个段落，可以支持 <strong>加粗</strong> 和 <em>斜体</em>。</p>
    //     <ul>
    //       <li>列表项1</li>
    //       <li>列表项2</li>
    //     </ul>
    //       <p>这是一个段落，可以支持 <strong>加粗</strong> 和 <em>斜体</em>。</p>
    //     <ul>
    //       <li>列表项1</li>
    //       <li>列表项2</li>
    //     </ul>
    //       <p>这是一个段落，可以支持 <strong>加粗</strong> 和 <em>斜体</em>。</p>
    //     <ul>
    //       <li>列表项1</li>
    //       <li>列表项2</li>
    //     </ul>
    //       <p>这是一个段落，可以支持 <strong>加粗</strong> 和 <em>斜体</em>。</p>
    //     <ul>
    //       <li>列表项1</li>
    //       <li>列表项2</li>
    //     </ul>
    //      <p>这是一个段落，可以支持 <strong>加粗</strong> 和 <em>斜体</em>。</p>
    //     <ul>
    //       <li>列表项1</li>
    //       <li>列表项2</li>
    //     </ul>
    //      <p>这是一个段落，可以支持 <strong>加粗</strong> 和 <em>斜体</em>。</p>
    //     <ul>
    //       <li>列表项1</li>
    //       <li>列表项2</li>
    //     </ul>
    // `;


    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    headerShown: false
                }}
            />
            <NavBack title={spaceDetail?.name } />
            <View style={styles.spaceContainer}>
                <View style={styles.map}>
                    <View style={{ flex: 1 }}>
                        <Image source={{ uri: spaceDetail?.floorPlanUrl }} style={{ width: "100%", height: "100%" }} />
                    </View>
                    <TouchableOpacity onPress={() => setIsEquipment(true)}>
                        <View style={styles.notice}>
                            <View style={styles.noticeIcon}>
                                <Image source={notice} style={{ width: "100%", height: "100%" }} />
                            </View>
                            <View style={styles.noticeContent}>
                                <MarqueeView speed={0.3} delay={5} >
                                    <Text numberOfLines={1} style={styles.noticeContentText}>{ spaceDetail?.todayAnnouncement }</Text>
                                </MarqueeView>
                            </View>
                            <AntDesign name="right" size={10} color="#EC6138" />
                        </View>
                    </TouchableOpacity>

                </View>
                <View style={styles.spaceWrap}>
                    <View style={styles.spaceHeader}>
                        <View style={styles.avator}>
                            <Image source={{ uri: spaceDetail?.coverUrl }} style={{ width: "100%", height: "100%" }} />
                        </View>
                        <View style={styles.headerBody}>
                            <View style={styles.title}>
                                <Text style={styles.titleText} numberOfLines={1}>{ spaceDetail?.name }</Text>
                            </View>
                            <View style={styles.titleContent}>
                                <Image source={locationIcon} style={{ width: 14, height: 14, }}/>
                                <Text style={styles.titleContentText}>{ spaceDetail?.destName }</Text>
                            </View>
                        </View>
                    </View>
                    <View style={styles.iconList}>
                        <View style={{ flexDirection: "row", marginBottom: 15, justifyContent: "space-between"  }}>
                            <TouchableOpacity style={styles.iconItem} onPress={() => setIsProduction(true)}>
                                <View style={styles.iconIcon}>
                                    <Image source={productionIcon} style={{ width: "100%", height: "100%" }}/>
                                </View>
                                <View style={styles.iconContent}>
                                    <Text style={styles.iconContentText}>空间介绍</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.iconItem} onPress={goFacilityList}>
                                <View style={styles.iconIcon}>
                                    <Image source={equipmentIcon} style={{ width: "100%", height: "100%" }}/>
                                </View>
                                <View style={styles.iconContent}>
                                    <Text style={styles.iconContentText}>设施介绍</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity style={[styles.iconItem]} onPress={goVideoList}>
                                <View style={styles.iconIcon}>
                                    <Image source={videoIcon} style={{ width: "100%", height: "100%" }}/>
                                </View>
                                <View style={styles.iconContent}>
                                    <Text style={styles.iconContentText}>视频介绍</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                        <View style={{ flexDirection: "row", marginBottom: 15, justifyContent: "space-between"  }}>
                            <TouchableOpacity style={styles.iconItem} onPress={() => setIsProgram(true)}>
                                <View style={styles.iconIcon}>
                                    <Image source={activityIcon} style={{ width: "100%", height: "100%" }}/>
                                </View>
                                <View style={styles.iconContent}>
                                    <Text style={styles.iconContentText}>活动节目单</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.iconItem} onPress={() => setIsJoin(true)}>
                                <View style={styles.iconIcon}>
                                    <Image source={joinIcon} style={{ width: "100%", height: "100%" }}/>
                                </View>
                                <View style={styles.iconContent}>
                                    <Text style={styles.iconContentText}>加入</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity style={styles.iconItem}>
                                {/*<View style={styles.iconIcon}>*/}
                                {/*    <Image source={joinIcon} style={{ width: "100%", height: "100%" }}/>*/}
                                {/*</View>*/}
                                {/*<View style={styles.iconContent}>*/}
                                {/*    <Text style={styles.iconContentText}>加入</Text>*/}
                                {/*</View>*/}
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </View>
            <Modal
                animationType="fade"
                transparent={true}
                visible={isEquipment}
            >
                <TouchableOpacity onPress={() => setIsEquipment(false)} activeOpacity={1}>
                    <View style={[styles.toolsModalContainer]}>
                        <View style={[styles.toolsWrap,{ padding: 12 }]}>
                            <View style={styles.modalHeader}>
                                <View style={styles.modalheaderTitle}>
                                    <Text style={styles.modalheaderTitleText}>今日公告</Text>
                                </View>
                                <TouchableOpacity onPress={() => setIsEquipment(false)}>
                                    <AntDesign name="close" size={18} color="black" />
                                    {/*<View style={styles.closeIcon}>*/}
                                    {/*    <Image source={closeIcon} style={{ width: "100%", height: "100%" }}/>*/}
                                    {/*</View>*/}
                                </TouchableOpacity>
                            </View>
                            <View style={styles.toolTitle}>
                                <View style={styles.toolTitleText}>
                                    <Text style={styles.toolTitleText}>
                                        今日公告
                                    </Text>
                                    <View style={styles.heng}></View>
                                </View>

                                <View style={{ flex: 1, }}></View>
                            </View>
                            <View style={[styles.modalContent, { paddingBottom: 100 }]}>
                                <View style={styles.descCotent}>
                                    <Text style={styles.descCotentText}>
                                        { spaceDetail?.todayAnnouncement }
                                    </Text>
                                </View>
                            </View>
                        </View>
                    </View>
                </TouchableOpacity>
            </Modal>

            <Modal
                animationType="fade"
                transparent={true}
                visible={isProgram}
            >
                <TouchableOpacity onPress={() => setIsProgram(false)}>
                    <View style={[styles.toolsModalContainer]}></View>
                </TouchableOpacity>

                <View style={[styles.toolsWrap, { padding: 12, backgroundColor: "#F7F7F7", borderRadius: 10, height: 500 }]}>
                    <View style={styles.modalHeader}>
                        <View style={styles.modalheaderTitle}>
                            <Text style={styles.modalheaderTitleText}>节目单</Text>
                        </View>
                        <TouchableOpacity onPress={() => setIsProgram(false)}>
                            <AntDesign name="close" size={18} color="black" />
                            {/*<View style={styles.closeIcon}>*/}
                            {/*    <Image source={closeIcon} style={{ width: "100%", height: "100%" }} />*/}
                            {/*</View>*/}
                        </TouchableOpacity>
                    </View>

                    <View style={styles.toolTitle}>
                        <View style={styles.toolTitleText}>
                            <Text style={styles.toolTitleText}>节目单</Text>
                            <View style={styles.heng}></View>
                        </View>
                        <View style={{ flex: 1 }}></View>
                    </View>

                    <ScrollView
                        contentContainerStyle={{ paddingVertical: 12 }}
                        keyboardShouldPersistTaps="handled"
                        style={{ flex: 1}}
                        showsVerticalScrollIndicator={false}
                    >
                        {
                            activityList.map((item, index) => {
                                return (
                                    <TouchableOpacity onPress={() => goActivityDetail(item.activityId)}>
                                        <View key={index} style={styles.programItem} key={index}>
                                            <View style={styles.programAvator}>
                                                <Image source={{ uri: item.coverUrl }} style={{ width: "100%", height: "100%" }} />
                                            </View>
                                            <View style={styles.programContent}>
                                                <View style={styles.programTitle}>
                                                    <Text style={styles.programTitleText}>{ item?.title }</Text>
                                                </View>
                                                <View style={styles.dateTimeContent}>
                                                    <View style={styles.dateTimeIcon}>
                                                        <Image source={dateTimeIcon} style={{ width: "100%", height: "100%" }} />
                                                    </View>
                                                    <View style={styles.dateTime}>
                                                        <Text style={styles.dateTimeText}>{ computedTime(item.durationStartTime, item.durationEndTime) }</Text>
                                                    </View>
                                                </View>
                                            </View>
                                            <AntDesign name="right" size={12} color="#9C9EAC" />
                                        </View>
                                    </TouchableOpacity>
                                );
                            })
                        }
                    </ScrollView>
                </View>
            </Modal>

            <Modal
                animationType="fade"
                transparent={true}
                visible={isJoin}
            >
               <TouchableOpacity onPress={() => setIsJoin(false)} activeOpacity={1}>
                   <View style={styles.toolsModalContainer}>
                       <View style={[styles.toolsWrap, { padding: 12 }]}>
                           <View style={styles.modalHeader}>
                               <View style={styles.modalheaderTitle}>
                                   <Text style={styles.modalheaderTitleText}>二维码</Text>
                               </View>
                               <TouchableOpacity onPress={() => setIsJoin(false)}>
                                   <AntDesign name="close" size={18} color="black" />
                                   {/*<View style={styles.closeIcon}>*/}
                                   {/*    <Image source={closeIcon} style={{ width: "100%", height: "100%" }}/>*/}
                                   {/*</View>*/}
                               </TouchableOpacity>
                           </View>
                           <View style={styles.joinWrap}>
                               {
                                   qrList?.map((item: any, index: number) => {
                                       return (
                                           <View style={styles.qrContainer} key={index}>
                                               <View style={styles.img}>
                                                   <Image source={{ uri: item.url }} style={{ width: "100%", height: '100%' }}/>
                                               </View>
                                               <View style={styles.qrContent}>
                                                   <Text style={styles.qrContentText}>
                                                       { item?.codeTitle }
                                                   </Text>
                                               </View>
                                           </View>
                                       )
                                   })
                               }
                           </View>
                       </View>
                   </View>
               </TouchableOpacity>
            </Modal>


            <Modal
                animationType="fade"
                transparent={true}
                visible={isProduction}
            >
               <TouchableOpacity onPress={() => setIsProduction(false)} activeOpacity={1}>
                   <View style={styles.toolsModalContainer}></View>
               </TouchableOpacity>
                <View style={styles.toolsWrap}>
                    <View style={[styles.modalHeader, { padding: 12, }]}>
                        <View style={styles.modalheaderTitle}>
                            <Text style={styles.modalheaderTitleText}>空间介绍</Text>
                        </View>
                        <TouchableOpacity onPress={() => setIsProduction(false)}>
                            <AntDesign name="close" size={18} color="black" />
                            {/*<View style={styles.closeIcon}>*/}
                            {/*    <Image source={closeIcon} style={{ width: "100%", height: "100%" }}/>*/}
                            {/*</View>*/}
                        </TouchableOpacity>
                    </View>
                    <ScrollView style={{ maxHeight: 600 }}>
                        <RenderHTML
                            contentWidth={600} // 替换为你的屏幕宽度
                            source={{ html: htmlContent }}
                        />
                    </ScrollView>
                </View>
            </Modal>

        </View>
    );
}

const styles = StyleSheet.create({
    spaceContainer: {
        flex: 1,
    },
    map: {
        flex: 1,

    },
    spaceWrap: {
        backgroundColor: "#FEFEFE",
        paddingBottom: 34,
        paddingTop: 16,
        paddingHorizontal: 12,
        borderRadius: 8,
    },
    avator: {
        width: 50,
        height: 50,
        borderRadius: 50,
        overflow: "hidden",
    },
    spaceHeader: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: 14,
    },
    headerBody: {
        marginLeft: 10,
    },
    title: {
        marginBottom: 12,
        maxWidth: 280
    },
    titleText: {
        fontSize: 16,
        color: "#2A2B30",
        fontWeight: "bold",
    },
    titleContent: {
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    titleContentText: {
        fontSize: 14,
        marginLeft: 6,
    },
    iconList: {
        backgroundColor: "#fff",
        // paddingVertical: 15,
        paddingTop: 12,
        paddingHorizontal: 8,
        borderRadius: 8,
        flexWrap: "wrap",
        shadowColor: 'rgba(149,157,165,1)', // 阴影颜色
        shadowOffset: { width: 0, height: 8 }, // 偏移
        shadowOpacity: 0.2, // 透明度
        shadowRadius: 24, // 模糊程度
        // Android 阴影
        elevation: 24, // Android 特有属性，值越大阴影越明显
    },
    iconItem: {
        width: 80,
        // backgroundColor: "blue",
        // marginRight: 40,
    },
    iconIcon: {
        width: 26,
        height: 26,
        margin: "auto",
    },
    iconContent: {
        margin: "auto",
        marginTop: 6,
    },
    iconContentText: {
        textAlign: "center",
        fontSize: 14,
    },
    notice: {
        position: "absolute",
        bottom: 10,
        left: 12,
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: "#FDF0EC",
        width: scaleSize(351),
        margin: "auto",
        paddingVertical: 8,
        paddingHorizontal: 10,
        borderRadius: 8,
    },
    noticeIcon: {
        width: 20,
        height: 17
    },
    noticeContent: {
        marginLeft: 4,
        flex: 1,
    },
    noticeContentText: {
        fontSize: 14,
        color: "#EC6138",
    },
    toolsModalContainer: {
        backgroundColor: 'rgba(0,0,0, 0.7)',
        height: "100%",

    },
    toolsWrap: {
        backgroundColor: "#fff",
        position: "absolute",
        bottom: 0,
        width: "100%",
        // padding: 12,
        borderTopLeftRadius: 8,
        borderTopRightRadius: 8,
        paddingBottom: 33,
    },
    modalHeader: {
        flexDirection: "row",
        marginTop: 8,
    },
    modalheaderTitle: {
        flex: 1,
    },
    modalheaderTitleText: {
        textAlign: "center",
        fontSize: 18,
    },
    closeIcon: {
        width: 12,
        height: 12
    },
    toolTitle: {
        marginTop: 12,
        flexDirection: "row",
    },
    toolTitleText: {
        fontSize: 18,
        position: "relative",
        fontWeight: "bold",
        zIndex: 9,
        display: "flex",
    },
    heng: {
        width: "100%",
        height: 6,
        backgroundColor: "#EC6138",
        position: "relative",
        left: 0,
        bottom: 8,
    },
    modalContent: {

    },
    descCotent: {
        marginTop: 8,
    },
    descCotentText: {
        fontSize: 14,
        color: "#676978"
    },
    joinWrap: {
        flexDirection: "row",
        marginTop: 30,
        margin: "auto",
        paddingBottom: 18,
    },
    qrContainer: {
        width: 180,
        // backgroundColor: "red",
    },
    qrContent: {
        margin: "auto",
        marginTop: 10,
    },
    qrContentText: {
        fontSize: 16,
        color: "#2A2B30"
    },
    img: {
        width: 110,
        height: 110,
        // backgroundColor: "blue",
        margin: "auto",
    },
    koneHeng: {
        backgroundColor: "#F7F7F7",
        height: 6,
        width: "100%",
        marginTop: 20,
        marginBottom: 10,
    },
    programItem: {
        flexDirection: "row",
        alignItems: "center",
        paddingVertical: 16,
        paddingHorizontal: 12,
        backgroundColor: "#fff",
        borderRadius: 8,
        marginBottom: 10,
    },
    programAvator: {
        width: 52,
        height: 52,
        overflow: "hidden",
        borderRadius: 50,
    },
    programContent: {
        flex: 1,
        marginLeft: 10,
    },
    programTitle: {

    },
    programTitleText: {
        color: "#2A2B30",
        fontSize: 16,
    },
    dateTimeContent: {
        flexDirection: "row",
        alignItems: "center",
        marginTop: 6,
    },
    dateTime: {},
    dateTimeText: {
        color: "#9C9EAC",
    },
    dateTimeIcon: {
        width: 11,
        height: 11,
        marginRight: 4,
    },
});
